import React, { Component,Suspense } from "react";
import {NavLink, withRouter,Redirect} from 'react-router-dom';
import {renderRoutes} from "react-router-config";
import routers from "./router/routes";
import './assest/iconfont/icon.css';
import style from './App.module.scss';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeNav:{color:'#008cff'},
      avtiveIndex:1
    }
  }
  render() {
    return (
      <React.Fragment>
          <Redirect to={'/home'}/>
          <Suspense>
            {renderRoutes(routers)}
          </Suspense>
          <div className={style.nav} onClick={(e)=>{this.toggleTab(e)}}>
            <div className={ style.navLink}>
              <NavLink to={'/home'}>
                <i  className='iconfont icon-index-copy' style={(this.state.avtiveIndex===1)?this.state.activeNav:{}} data-name={'home'}></i>
              </NavLink>
              <span style={(this.state.avtiveIndex===1)?this.state.activeNav:{}} data-name={'home'}>首页</span>
            </div>
            <div className={ style.navLink}>
              <NavLink to={'/serve'}>
                <i  className='iconfont iconfont icon-fuwu' style={(this.state.avtiveIndex===2)?this.state.activeNav:{}}  data-name={'serve'}></i>
              </NavLink>
              <span style={(this.state.avtiveIndex===2)?this.state.activeNav:{}} data-name={'serve'}>服务</span>
            </div>
            <div className={ style.navLink}>
              <NavLink to={'/my'}>
                <i  className='iconfont icon-wode' style={(this.state.avtiveIndex===3)?this.state.activeNav:{}}  data-name={'my'}></i>
              </NavLink>
              <span style={(this.state.avtiveIndex===3)?this.state.activeNav:{}} data-name={'my'}>我的</span>
            </div>
        </div>
      </React.Fragment>
    );
  }
  toggleTab(e){
    let type = e.target.dataset.name
    switch (type){
      case 'home':
        this.setState({
          avtiveIndex:1,
        })
        break
      case 'serve':
        this.setState({
          avtiveIndex:2,
        })
        break
      case 'my':
        this.setState({
          avtiveIndex:3,
        })
        break
    }
  }
}

export default withRouter(App);
